<script>
import { defineComponent, reactive, toRefs, onMounted, watch } from "vue";
import { DeleteFilled } from "@element-plus/icons-vue";
import { useUserStore } from "@/store/modules/user.js";

export default defineComponent({
  name: "TabCard",
  components: { DeleteFilled },
  props: {
    tabs: {
      type: Array,
      default: () => {
        return [];
      },
    },
    defaultIndex: {
      type: Number,
      default: 0,
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      current: -1,
      tabLineLeft: 20,
    });

    const store = useUserStore();

    watch(
      () => store.count,
      (a) => {
        if (store.count === 1) {
          state.current = 3;
          state.tabLineLeft = 20 + 3 * 102;
          store.count = 0;
        }
      },
      {
        immediate: true,
      }
    );

    onMounted(() => {
      handleTabClick(props.defaultIndex);
    });

    const handleTabClick = (e) => {
      state.tabLineLeft = 20 + e * 102;
      state.current = e;
      emit("changeIndex", state.current);
    };

    return {
      ...toRefs(state),
      handleTabClick,
    };
  },
});
</script>

<template>
  <div class="component-tab-card-container">
    <div class="tabs-block">
      <div
        class="tab-link"
        v-for="(item, index) in tabs"
        :key="index"
        :class="current === index ? 'active' : ''"
        @click="handleTabClick(index)"
      >
        {{ item }}
      </div>
      <div class="link-line" :style="{ left: `${tabLineLeft}px` }" />
    </div>
    <div class="tab-card-slot">
      <slot />
    </div>
  </div>
</template>

<style lang="scss">
.component-tab-card-container {
  width: 100%;

  .tabs-block {
    width: 100%;
    border-bottom: 2px solid #a8a7a7;
    height: 36px;
    padding-left: 20px;
    position: relative;
    display: flex;

    .tab-link {
      height: 100%;
      width: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      user-select: none;
      cursor: pointer;

      &.active {
        color: #c1272d;
      }

      &:last-child {
        margin-right: 0;
      }
    }

    .link-line {
      width: 90px;
      height: 3px;
      background-color: #c1272d;
      position: absolute;
      bottom: 0;
      transition-duration: 0.3s;
    }
  }

  .tab-card-slot {
    padding-top: 15px;
  }
}
</style>
